<!DOCTYPE HTML>
<html>
<head>
<!--jQuery dependencies-->
    <link rel="stylesheet" href="../../pqgrid/css/jquery-ui-base-1.9.1.css" />
    <script src="../../pqgrid/js/jquery-1.9.1.min.js"></script>    
    <script src="../../pqgrid/js/jquery-ui-1.9.2.min.js"></script>
<!--PQ Grid files-->
    <link rel="stylesheet" href="../../pqgrid/pqgrid.min.css" />
    <script src="../../pqgrid/pqgrid.min.js"></script>
<!--PQ Grid Office theme-->
    <link rel="stylesheet" href="../../pqgrid/themes/office/pqgrid.css" />

    <style type="text/css">
	.pq-grid .pq-editor-focus
    {
        outline:none;
        border:1px solid #bbb;    
        border-radius:6px;
        background-image: linear-gradient(#e6e6e6, #fefefe);

        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e6e6e6', endColorstr='#fefefe'); 
        background: -webkit-gradient(linear, left top, left bottom, from(#e6e6e6), to(#fefefe)); 
        background: -moz-linear-gradient(top,  #e6e6e6,  #fefefe); /* for firefox 3.6+ */	        
    }
	</style>

<script>
    $(function () {
        var colM = [
            { title: "Ship Country", dataIndx: "ShipCountry", width: 120,
                editor: {
                    type: "select",
                    options: []
                },
                validations: [
                    { type: 'minLen', value: 1, msg: "Required" }
                ]
            },
            { dataIndx: "ShipViaId", title: "Shipping Via ID", editable: false },
		    { title: "Shipping Via", dataIndx: "ShipVia", width: 110,
		        editor: {
		            type: 'select',
		            valueIndx: "value",
		            labelIndx: "text",
		            options: [],
		            mapIndices: {"text": "ShipVia", "value": "ShipViaId"}
		        },
		        validations: [{ type: 'minLen', value: 1, msg: "Required"}]
		    },
            { title: "Order ID", width: 100, dataIndx: "OrderID", editable: false }
		];
        var dataModel = {
            dataType: "JSON",
            location: "remote",            
            method: "GET",
            sortIndx: "ShipCountry",
            sortDir: "up",
            url: "/content/invoice.json"
        }
        $("div#grid_custom_editing").pqGrid({
            colModel: colM,
            create: function (evt, ui) {
                var grid = $(this).pqGrid('getInstance').grid;
                //fetch options for ShipCountry column from server.
                $.getJSON("/pro/demos/getCountries", function (response) {
                    var column = grid.getColumn({ dataIndx: 'ShipCountry' });
                    column.editor.options = response;
                });
                //fetch options for ShipVia column from server.
                $.getJSON("/Content/ShipVia.json", function (response) {
                    var column = grid.getColumn({ dataIndx: 'ShipVia' });
                    column.editor.options = response;
                });
            },
            dataModel: dataModel,            
            editModel: {
                saveKey: $.ui.keyCode.ENTER,
                keyUpDown: false,
                clicksToEdit: 1  
            },
            historyModel: { checkEditable: false},
            numberCell: { show: false },
            resizable: true,            
            scrollModel: { autoFit: true },
            selectionModel: { type: 'cell' },
            showBottom: false,
            title: "Shipping Orders <b>(Custom editing)</b>"           
        });
    });
        
</script>    
</head>
<body>

<div id="grid_custom_editing" style="margin:auto;"></div>

</body>

</html>
